<template>
<div>
  <p>生命周期</p>
  <p>生命周期会有两个选择</p>
</div>
  
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
export default {
  name: 'LifeCycles',
  props: {
    msg: String
  },
  // setup等于 boforeCreate 和 created
  setup() { // Composition API
    console.log('setup')
    onBeforeMount(() => {
      console.log('onBoforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
  },

  // option API
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  // beforeDestroy 改名
  boforeUnmount() {
    console.log('boforeUnmount')
  },
  // destroy 改名
  unmounted() {
    console.log('unmounted')
  }
}
</script>

<style>

</style>script